<template>
  <div class="admin_page">
    <div class="admin_container">
      <div class="navigator">
        <ul>
          <li>管理员：{{ username }}</li>
          <li @click="findAll">查找所有用户</li>
          <li @click="flag.search=!flag.search">搜索用户</li>
          <li v-if="flag.search">
            <input type="text"
                   v-model="search_value"
                   placeholder="请输入用户名"
                   style="width:150px">
            <input type="button"
                   value="搜索"
                   @click="searchBtn">
          </li>
          <li @click="createSlide">管理轮播图</li>
          <li @click="lookTime">查看网站加载时间</li>
        </ul>
      </div>
      <div class="container">
        <!-- 查找所有用户 -->
        <div class="userList"
             v-if="flag.userList">
          <user-list v-for="item in userList"
                     :key="item._id"
                     :userImg="item.userImg"
                     :username="item.username"
                     :userPhone="item.userPhone"
                     :userMail="item.userMail"
                     :password="item.password"
                     :userStop="item.userStop"
                     :userAdmin="item.userAdmin"
                     :_id="item._id"></user-list>
        </div>
        <!-- 根据用户名查找用户 -->
        <div v-if="flag.userOne">
          <user-list :userImg="userOne.userImg"
                     :username="userOne.username"
                     :userPhone="userOne.userPhone"
                     :userMail="userOne.userMail"
                     :password="userOne.password"
                     :userStop="userOne.userStop"
                     :userAdmin="userOne.userAdmin"
                     :_id="userOne._id"></user-list>
        </div>
        <!-- 管理轮播图 -->
        <div v-if="flag.initial">
          <el-upload class="upload-demo"
                     action="http://localhost:3000/users/upload"
                     :data="data"
                     :before-upload="beforeUpload"
                     :on-success="success"
                     :on-remove="remove"
                     :file-list="fileList"
                     list-type="picture"
                     :limit="5"
                     :on-exceed="onExceed">
            <el-button size="small"
                       type="primary">点击上传</el-button>
            <div slot="tip"
                 class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
          <rh-button type="f30"
                     v-if="slideFlag"
                     @click="submit"
                     class="upload_btn">提交</rh-button>
          <rh-button type="f30"
                     v-if="!slideFlag"
                     @click="edit"
                     class="upload_btn">提交</rh-button>
        </div>
        <!-- 查看网站加载时间 -->
        <div v-show="flag.lookFlag">
          <div style="width: 600px;height:400px;"
               ref="main"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import userList from '@/components/admin/userList'
import RhButton from '@/components/basic/rh-button'
import $ from 'jquery'
export default {
  components: {
    userList,
    RhButton
  },
  data () {
    return {
      fileList: [],
      objList: [],
      data: {},
      username: localStorage.getItem('username'),
      password: "",
      userList: [],
      userOne: {},
      search_value: '',
      slideId: '',
      slideFlag: '',
      flag: {
        userList: false,
        search: false,
        userOne: false,
        initial: false,
        lookFlag: false
      },
    }
  },
  created () {
    this.$http.post('http://localhost:3000/admin/findSlide', { name: 'slideshow' }).then(response => {
      if (response.data.status == 1) {
        this.slideFlag = true;
      } else {
        this.slideFlag = false;
        this.slideId = response.data.data._id;
        this.fileList = response.data.data.imagesList;
        this.objList = response.data.data.imagesList;
      }
    })
    this.findAll();
  },
  methods: {
    lookTime () {
      for (let item in this.flag) {
        this.flag[item] = false;
      }
      this.flag.lookFlag = true;
      let dom = echarts.init(this.$refs.main);
      let options = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      }
      dom.setOption(options);
    },
    success (response, file, fileList) {
      this.fileList = fileList;
      // 存储图片数组
      let obj = {
        name: file.name,
        id: file.uid,
        url: `http://localhost:3000${response.img.file.path.slice(6)}`
      };
      this.objList.push(obj);
    },
    remove (file, fileList) {
      this.fileList = fileList;
      // 删除对应的图片链接
      let index = this.objList.findIndex(item => item.id == file.uid);
      this.objList.splice(index, 1);
    },
    beforeUpload () {
      let $imgFile = $(".el-upload__input").get(0);
      this.data = { "upload": $imgFile.files[0] };
    },
    onExceed () {
      alert("最多只能上传5张图片");
    },
    submit () {
      this.$http.post('http://localhost:3000/admin/createSlide', { name: 'slideshow', imagesList: this.objList }).then(response => {
        if (response.data.status == 1) {
          alert(response.data.message);
        } else {
          alert(response.data.message);
        }
      })
    },
    edit () {
      this.$http.post('http://localhost:3000/admin/editSlide', { _id: this.slideId, imagesList: this.objList }).then(response => {
        if (response.data.status == 1) {
          alert(response.data.message);
        } else {
          alert(response.data.message);
        }
      })
    },
    findAll () {
      for (let item in this.flag) {
        this.flag[item] = false;
      }
      this.flag.userList = true;
      this.$http.get('http://localhost:3000/admin/findAll').then(response => {
        this.userList = response.data.data;
      })
    },
    searchBtn () {
      for (let item in this.flag) {
        this.flag[item] = false;
      }
      this.flag.userOne = true;
      this.$http.post('http://localhost:3000/admin/findOne', { username: this.search_value }).then(response => {
        this.search_value = '';
        this.userOne = response.data.data;
      })
    },
    createSlide () {
      this.fileList = this.objList;
      for (let item in this.flag) {
        this.flag[item] = false;
      }
      this.flag.initial = true;
    }
  }
}
</script>

<style lang="less" scoped>
.admin_page {
  width: 100%;
  height: 100%;

  .login_container {
    margin: 200px auto;
    width: 400px;
    height: 280px;
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
  }
  .admin_container {
    width: 1320px;
    height: 800px;
    margin: 50px auto;
    display: flex;
    justify-content: space-around;

    .navigator {
      width: 200px;
      height: 800px;
      border: 1px solid #ccc;

      li {
        width: 200px;
        height: 30px;
        line-height: 30px;
        padding: 5px 0;
        text-align: center;
        border-bottom: 1px solid #ccc;
        cursor: pointer;
      }
    }
    .container {
      width: 1100px;
      height: 800px;
      border: 1px solid #ccc;

      .upload-demo {
        width: 500px;
        padding: 10px;
      }
      .upload_btn {
        margin-left: 10px;
      }
    }
  }
  .el-input {
    width: 280px;
  }
}
</style>